<template>
<div>
  <div class="Baseinfo border-bottom">
     <div class="Baseinfo-item">
       <div><span class="Baseinfo-score">4.9</span><span class="Baseinfo-score-txt">分</span><span class="Baseinfo-score-desc">很棒</span></div>
       <div><span class="Baseinfo-totalcommentnum">58881条评论</span><span class="Baseinfo-totalcommentnum">76条攻略</span></div>
     </div>
     <!-- 景点简介 -->
     <div class="Baseinfo-item">
       <div class="Baseinfo-sightcard-title">景点简介</div>
       <div class="Baseinfo-sightcard-text">开发时间、贴士</div>
     </div>
   </div>
   <div class="Baseinfo-address">
      陕西省西安市临潼县秦始皇陵东1.5公里处
   </div>
</div>
</template>

<script>
export default {
  name: 'DetailBaseinfo',
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
  .Baseinfo{
    display: flex;
    padding: .2rem 0;
    border-radius: .15rem .15rem 0 0;
    margin-top: -.2rem;
    z-index: 1;
    position: relative;
    background-color: #fff;
    .Baseinfo-item{
      flex: 1;
      padding: 0 .2rem;
      border-right: 1px solid #eee;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: .3rem;
        width: .15rem;
        height: .15rem;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg);
      }
      .Baseinfo-score{
        font-size: .44rem;
        color: lighten($bgColor,20%);
        line-height: .44rem;
      }
      .Baseinfo-score-txt{
        font-size: .28rem;
        color: lighten($bgColor,20%);
        line-height: .48rem;
      }
      .Baseinfo-score-desc{
        font-size: .28rem;
        color: lighten($bgColor,20%);
        line-height: .48rem;
        margin-left: .2rem;
      }
      .Baseinfo-totalcommentnum{
        font-size: .24rem;
        color: #9e9e9e;
        line-height: .32rem;
        margin-right: .2rem;
      }
      .Baseinfo-sightcard-title{
        font-size: .28rem;
        color: #212121;
        line-height: .48rem;
        padding-left: .1rem;
      }
      .Baseinfo-sightcard-text{ 
        color: #9e9e9e;
        font-size: .24rem;
        padding-left: .1rem;
        margin-top: .05rem;
      }
      &:last-child{
        border-right: none;
      }
    }
  }
  .Baseinfo-address{
    display: block;
    position: relative;
    padding: .2rem .2rem;
    line-height: .36rem;
    color: #212121;
    border-bottom: .2rem solid #eee;
    &::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: .3rem;
        width: .15rem;
        height: .15rem;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg);
    }
  }
</style>

